revision:
code:
<div class="container">Select:
<ul class="filter-menu">
<li data-target="all">All</li>
<li data-target="male">Male</li>
<li data-target="female">Female</li>
<li data-target="car">Car</li>
</ul>
<ul class="filter-item">
<li data-item="male"><img src="../images/einstein.jpg" alt=""></li>
<li data-item="male"><img src="../images/tesla.jpg" alt=""></li>
<li data-item="female"><img src="../images/4a.jpg" alt=""></li>
<li data-item="female"><img src="../images/cartoon.jpg" alt=""></li>
<li data-item="car"><img src="../images/car1.jpg" alt=""></li>
<li data-item="car"><img src="../images/car2.jpg" alt=""></li>
<li data-item="car"><img src="../images/19.jpg" alt=""></li>
<li data-item="car"><img src="../images/17.jpg" alt=""></li>
<li data-item="male"><img src="../images/hemingway.jpg" alt=""></li>
<li data-item="male"><img src="../images/malcom-x.jpg" alt=""></li>
</ul>
</div>
<style>
ul{list-style: none;}
.filter-item img{max-width: 100%;height: auto;}
.container{max-width: 99vw; margin: auto; padding: 1vw; text-align: left;}
.filter-menu{margin-bottom: 20px;}
.filter-menu li{display: inline-block; padding: 10px 18px; background: #eb4d4b; color: #fff; cursor: pointer;}
.filter-menu li:hover, .filter-menu li.current{ background: #ff7979;}
.filter-item{display: flex; flex-flow: row wrap;}
.filter-item li{ width: 25%; padding: 2px; float: left;}
.filter-item li.active{width: 50%; padding: 2px; transition: all 0.5s ease;}
.filter-item li.delete{width: 0%; padding: 0; transition: all 0.5s ease;}
.filter-item img{display: block; width: 100%; height: auto;}
@media screen and (min-width: 768px){
.filter-item li.active, .filter-item li{ width: 33.33%; }
h2{font-size: 190%;}
}
@media screen and (min-width: 1280px){
.filter-item li.active, .filter-item li{width: 25%;}
h2{font-size: 270%;}
}
</style>
<script>
let sortBtn = document.querySelector('.filter-menu').children;
let sortItem = document.querySelector('.filter-item').children;
for(let i = 0; i < sortBtn.length; i++){
sortBtn[i].addEventListener('click', function(){
for(let j = 0; j< sortBtn.length; j++){
sortBtn[j].classList.remove('current');
}
this.classList.add('current');
let targetData = this.getAttribute('data-target');
for(let k = 0; k < sortItem.length; k++){
sortItem[k].classList.remove('active');
sortItem[k].classList.add('delete');
if(sortItem[k].getAttribute('data-item') == targetData || targetData == "all"){
sortItem[k].classList.remove('delete');
sortItem[k].classList.add('active');
}
}
});
}
</script>